<template>
  <div class="leftOne">
    <div>
      <moduleTitle :name="title"></moduleTitle>
    </div>
    <div class="one">
      <img src="@/assets/newDashboard/L1.png" alt="" class="one-left" />
      <div class="one-right">
        <div class="one-top">
          <img src="@/assets/newDashboard/L1bg.png" alt="" class="one-topimg" />
          <div class="one-topbox">
            <div class="topbox-left">标准共&nbsp;----</div>
            <div class="topbox-right">
              <div class="topbox-right-l">
                {{ allModel }}
              </div>
              <div class="topbox-right-r">个</div>
            </div>
          </div>
        </div>
        <div class="one-text2">
          <div class="text2">标准被引用次数</div>
          <div class="text2">764 次</div>
        </div>
        <div class="one-text2">
          <div class="text2">制定标准数据项</div>
          <div class="text2">{{ standard }} 项</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSpecificationCount } from '@/api/index/index'

import moduleTitle from '@/components/moduleTitle'
import Cookies from 'js-cookie'

export default {
  name: 'SdssJddsZhgjWebLeftOne',
  components: {
    moduleTitle,
  },
  data() {
    return {
      title: '数据标准',
      allModel: 1,
      standard: 1,
      time: null,
    }
  },
  mounted() {
    this.time = setInterval(() => {
      if (Cookies.get('Admin-Token')) {
        this.getBaseInfo()
      }
    }, 1000)
  },
  methods: {
    getBaseInfo() {
      getSpecificationCount().then((res) => {
        if (res.data.code == 200) {
          clearInterval(this.time)
          this.allModel = res.data.data.govCount
          this.standard = res.data.data.modelCount
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.leftOne {
  width: 100%;
  height: 28%;
  // background-color: yellow;
  margin-top: 3.5vh;
}

.one {
  width: 100%;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding: 0.517vw 1.6667vw 1.0417vw;
  box-sizing: border-box;
}

.one-left {
  width: 5.4083vw;
  height: 9.4593vh;
  margin-left: 1.0417vw;
}

.one-right {
  margin-left: 2.3958vw;
  width: 9.8958vw;
}

.one-top {
  position: relative;
  width: 9.8958vw;
  height: 4.6296vh;
}

.one-topimg {
  width: 9.8958vw;
  height: 4.8296vh;
}

.one-topbox {
  position: absolute;
  left: 0;
  top: 0;
  width: 9.8958vw;
  height: 4.6296vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.0417vw;
  box-sizing: border-box;
}

.one-topbox div {
  width: 70%;
  text-align: center;
}

.topbox-left {
  font-size: 0.8333vw;
  font-family: Adobe Heiti Std;
  color: #ffffff;
  font-weight: normal;
  // font-weight: 600;
}

.one-topbox .topbox-right {
  display: flex;
  align-items: center;
  width: 30%;
}

.topbox-right-l {
  font-size: 1.25vw;
  font-family: DINPro;
  font-weight: 500;
  color: #3bf5ff;
}

.topbox-right-r {
  font-family: SourceHanSansCN-Regular;
  font-size: 0.7292vw;
  margin-left: 0.4167vw;
  color: #78e9eb;
}

.one-text2 {
  padding: 0 0.5208vw;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text2 {
  margin-top: 0.7292vw;
  font-size: 0.7292vw;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #cedce6;
}
</style>
